<template>
	<div class="goodsInfo-container">
		<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
			<div class="ball" v-show="ballFlag" ref="ball"></div>
		</transition>
		<!-- 轮播 -->
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<swiper :list="list" :isfull="false"></swiper>
				</div>
			</div>
		</div>
		<!-- 购买 -->
		<div class="mui-card">
			<div class="mui-card-header">{{goodInfo.title}}</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="price">
						市场价 : <del>￥{{goodInfo.market_price}}</del> 销售价 : <span class="now_price">￥{{goodInfo.sell_price}}</span>
					</p>
					<p>购买数量 : <numbox @getcount="getSelectedCound" :max="goodInfo.stock_quantity"></numbox>
					</p>
					<p>
						<mt-button type="primary" size="small">立即购买</mt-button>
						<mt-button type="danger" size="small" @click="addshopcar">加入购物车</mt-button>
					</p>
				</div>
			</div>
		</div>
		<!-- 参数 -->
		<div class="mui-card">
			<div class="mui-card-header">商品参数</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>商品货号 : {{goodInfo.goods_no}}</p>
					<p>库存情况 : {{goodInfo.stock_quantity}}</p>
					<p>上架时间 : {{goodInfo.add_time|dateFormat}}</p>
				</div>
			</div>
			<div class="mui-card-footer">
				<mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
				<mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
			</div>
		</div>
	</div>
</template>

<script>
	import swiper from '../subComponents/swiper.vue'
	import numbox from '../subComponents/goodsInfo_numbox.vue'
	export default {
		data() {
			return {
				id: this.$route.params.id,
				list: [],
				goodInfo: {},
				ballFlag: false,
				selectedcound:1
			}
		},
		created() {
			this.getLunbotu();
			this.getGoodsInfo()
		},
		methods: {
			getLunbotu() {
				this.$http.get('api/getthumimages/' + this.id).then(res => {
					res.body.message.forEach(item => {
						item.img = item.src
					})
					this.list = res.body.message
				})
			},
			getGoodsInfo() {
				this.$http.get('api/goods/getinfo/' + this.id).then(res => {
					console.log(res.body.message[0]);
					this.goodInfo = res.body.message[0];
				})
			},
			goDesc(id) {
				this.$router.push({
					name: 'goodsdesc',
					params: {
						id
					}
				})
			},
			goComment(id) {
				this.$router.push({
					name: 'goodscomment',
					params: {
						id
					}
				})
			},
			getSelectedCound(val){
				this.selectedcound=val;
				//console.log(val)
			},
			addshopcar() {
				 // 添加到购物车
				      this.ballFlag = !this.ballFlag;
				      // { id:商品的id, count: 要购买的数量, price: 商品的单价，selected: false  }
				      // 拼接出一个，要保存到 store 中 car 数组里的 商品信息对象
				      var goodsinfo = {id: this.id, count: this.selectedcound, price:this.goodInfo.sell_price, selected: true };
				      // 调用 store 中的 mutations 来将商品加入购物车
				      this.$store.commit("addToCar", goodsinfo);
			},
			beforeEnter(el) {
				el.style.transform = "translate(0,0)"
			},
			enter(el, done) {
				el.offsetWidth
				var ballPosition=this.$refs.ball.getBoundingClientRect();
				var badgePosition=document.getElementById("badge").getBoundingClientRect();
				var x=badgePosition.left-ballPosition.left;
				var y=badgePosition.top-ballPosition.top;
			     el.style.transform="translate("+x+"px,"+y+"px)"
			     el.style.transition="all 0.6s cubic-bezier(.64,.64,.83,.67)"
			     done();
			},
			afterEnter() {
			    this.ballFlag=!this.ballFlag
			},
			
		},
		components: {
			swiper,
			numbox
		}
	}
</script>

<style>
	.goodsInfo-container {
		background-color: #eee;
		overflow: hidden;
	}

	.mint-swipe-item {
		text-align: center;
	}

	.now_price {
		color: red;
		font-size: 18px;
		font-weight: 700;
	}

	.mui-card-footer {
		display: block;
	}

	.mui-card-footer button {
		margin: 10px 0;
	}

	.ball {
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: red;
		position: absolute;
		left: 146px;
		top: 390px;
		z-index: 99;
	}
</style>
